<template>
    <el-dialog
        class="dialog"
        :destroy-on-close="true"
        :title="title"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        @close="onDialogClose"
    >
        <el-form
            ref="form"
            label-width="auto"
            class="form"
            :model="formData"
            :rules="rules"
        >
            <el-form-item label="房间" prop="room_sn" class="big-el big-select">
                <div class="box-row">
                    <el-select
                        v-model="formData.build_sn"
                        placeholder="请选择所属楼栋"
                        :disabled="isEdit"
                    >
                        <el-option
                            v-for="item in buildingData"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                    <el-select
                        v-model="formData.floor_sn"
                        placeholder="请选择所属楼层"
                        :disabled="isEdit"
                    >
                        <el-option
                            v-for="item in floorData"
                            :key="item.floor_sn"
                            :label="item.floor_name"
                            :value="item.floor_sn"
                        ></el-option>
                    </el-select>
                    <el-select
                        v-model="formData.room_sn"
                        filterable
                        reserve-keyword
                        placeholder="请选择房间"
                        :disabled="isEdit"
                    >
                        <el-option
                            v-for="item in roomData"
                            :key="item.room_sn"
                            :label="item.room_name"
                            :value="item.room_sn"
                        ></el-option>
                    </el-select>
                </div>
            </el-form-item>
            <el-form-item label="身份类型" prop="residence_identity">
                <el-select
                    v-model="formData.residence_identity"
                    placeholder="请选择身份类型"
                >
                    <el-option
                        v-for="item in typeData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="描述" prop="remark">
                <el-input
                    v-model="formData.remark"
                    placeholder="请输入描述"
                    maxlength="50"
                    type="textarea"
                    resize="none"
                    :autosize="{ minRows: 4, maxRows: 4 }"
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="onDialogClose">取消</el-button>
            <el-button type="primary" @click="onSubmit">确认</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { Action, Getter } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
import { mixinNext } from "@/mixin/Next";
@Component({
    mixins: [mixinDialogForm, mixinNext]
})
export default class parkTenantRoomEdit extends Vue {
    // 新增
    @Action("parkTenantRoom/add") itemAdd: any;
    @Action("parkTenantRoom/edit") itemEdit: any;
    @Action("parkRoom/list") getRoom: any;
    @Getter("sharing/tenantIdentity") typeData: any;

    @Action("parkFloor/all") getFloor: any;
    @Action("parkBuilding/all") getTree: any;
    @Getter("parkBuilding/all") buildingData: any;
    editInit(data: any) {
        const me = this as any;
        data.residence_identity = data.residence_identity.toString();
        me.formData = Object.assign({}, me.formData, data);
    }

    created() {
        this.getTree();
    }
    @Prop() readonly data: any;
    @Watch("data", { immediate: true })
    updateData({ member_sn }: any = {}) {
        if (member_sn) {
            this.formData.member_sn = member_sn;
        }
    }
    // 表单数据
    formData: any = {
        build_sn: "",
        floor_sn: "",
        member_sn: "",
        room_sn: "",
        residence_identity: ""
    };
    floorData: any = [];
    @Watch("formData.build_sn")
    updateBuilding(build_sn: any) {
        const me = this as any;
        me.updateNext(
            me.getFloor,
            { build_sn },
            "floorData",
            "formData.floor_sn",
            {
                queryName: "floor_sn"
            }
        );
    }
    roomData: any = [];
    @Watch("formData.floor_sn")
    updateFloor(floor_sn: any) {
        const me = this as any;
        me.updateNext(
            me.getRoom,
            { floor_sn },
            "roomData",
            "formData.room_sn",
            {
                queryName: "room_sn"
            }
        );
    }
    /**
     * 校验配置
     *
     * @type {*}
     * @memberof mixinViewRules
     */
    rules: any = {
        room_sn: [
            {
                required: true,
                message: "请选择房间",
                trigger: "blur"
            }
        ],
        residence_identity: [
            {
                required: true,
                message: "请选择身份类型",
                trigger: "blur"
            }
        ]
    };
    // 标题
    get title() {
        const title = (this as any).isEdit ? "编辑" : "新增";
        return `${title}住户身份`;
    }
}
</script>
<style scoped lang="scss">
::v-deep.dialog {
    .form.form {
        .el-form-item:not(.big-el) {
            .el-form-item__content {
                width: 480px;
            }
        }
    }
}
</style>
